import Link from "next/link";

// 模拟博客数据
const blogPosts = [
  {
    id: 1,
    title: "JAMstack 架构的优势",
    excerpt: "探索 JAMstack 架构如何改变现代 Web 开发，提供更好的性能、安全性和开发体验。",
    date: "2024-01-15",
    slug: "jamstack-advantages",
    category: "架构",
    readTime: "5 分钟"
  },
  {
    id: 2,
    title: "Next.js 静态站点生成最佳实践",
    excerpt: "学习如何使用 Next.js 的 SSG 功能构建高性能的静态网站。",
    date: "2024-01-10",
    slug: "nextjs-ssg-best-practices",
    category: "技术",
    readTime: "8 分钟"
  },
  {
    id: 3,
    title: "Tailwind CSS 设计系统",
    excerpt: "了解如何使用 Tailwind CSS 创建一致且可维护的设计系统。",
    date: "2024-01-05",
    slug: "tailwind-design-system",
    category: "设计",
    readTime: "6 分钟"
  },
  {
    id: 4,
    title: "API 路由与无服务器函数",
    excerpt: "探索 Next.js API 路由的强大功能，构建全栈应用无需额外后端。",
    date: "2024-01-01",
    slug: "api-routes-serverless",
    category: "后端",
    readTime: "7 分钟"
  }
];

export default function BlogPage() {
  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-4xl mx-auto px-4 py-12">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold text-gray-900 mb-4">博客</h1>
          <p className="text-xl text-gray-600">
            探索现代 Web 开发的最新趋势和最佳实践
          </p>
        </div>

        <div className="grid gap-8">
          {blogPosts.map((post) => (
            <article 
              key={post.id}
              className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
            >
              <div className="p-8">
                <div className="flex items-center gap-4 mb-4">
                  <span className="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full">
                    {post.category}
                  </span>
                  <span className="text-gray-500 text-sm">{post.date}</span>
                  <span className="text-gray-500 text-sm">{post.readTime}</span>
                </div>
                
                <h2 className="text-2xl font-bold text-gray-900 mb-3">
                  <Link 
                    href={`/blog/${post.slug}`}
                    className="hover:text-blue-600 transition-colors"
                  >
                    {post.title}
                  </Link>
                </h2>
                
                <p className="text-gray-600 mb-4 leading-relaxed">
                  {post.excerpt}
                </p>
                
                <Link 
                  href={`/blog/${post.slug}`}
                  className="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium transition-colors"
                >
                  阅读更多
                  <svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                  </svg>
                </Link>
              </div>
            </article>
          ))}
        </div>

        <div className="text-center mt-12">
          <p className="text-gray-600">
            想要了解更多？<Link href="/about" className="text-blue-600 hover:text-blue-800 font-medium">联系我们</Link>
          </p>
        </div>
      </div>
    </div>
  );
}
